<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>fullPage.js — 回调函数演示</title>
  <link rel="stylesheet" href="full-css.css">
  <style>
    #menu {
      margin: 0;
      padding: 0;
      position: fixed;
      left: -450px;
      top: 10px;
      list-style-type: none;
      z-index: 70;

    }
    #menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
    #menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
    #menu .active a { color: #fff; background-color: #333;}
    .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
    .tableCell{
      display: block;
    }
    .section>div{
      padding-left: 100px;
      text-align: left;
    }
    .menueAnimation{
      animation:menueLeft 2s forwards;
      -moz-animation:menueLeft 2s forwards; /* Firefox */
      -webkit-animation:menueLeft 2s forwards; /* Safari and Chrome */
      -o-animation:menueLeft 2s forwards; /* Opera */
    }
    .title{
      font-size: 40px;
      line-height: 70px;
    }
    .content{
      font-size: 25px;
    }
    @keyframes menueLeft
    {
      from {
        left: -400px;
      }
      to {
        left: 10px;
      }
    }
/*left*/
    @-moz-keyframes menueLeft /* Firefox */
    {
      from {
        left: -400px;
      }
      to {
        left: 10px;
      }
    }

    @-webkit-keyframes menueLeft /* Safari and Chrome */
    {
      from {
        left: -400px;
        top: 10px;
      }
      to {
        left: 10px;
        top: 10px;
      }
    }

    @-o-keyframes menueLeft /* Opera */
    {
      from {
        left: -400px;
        top: 10px;
      }
      to {
        left: 10px;
        top: 10px;
      }
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
  <script src="jq-ui.js"></script>
  <script src="full-js.js"></script>
  <script>
    $(document).ready(function() {
      $.fn.fullpage({
        slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        anchors: ['page1', 'page2', 'page3', 'page4'],
        menu: '#menu'
      });
      $('.section').on('click',function(){
        var de = document.documentElement;
        if (de.requestFullscreen) {
          de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
          de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
          de.webkitRequestFullScreen();
        }

      })
      document.addEventListener("webkitfullscreenchange", function(e) {
        if (!document.webkitIsFullScreen) {
          $('#menu').removeClass('menueAnimation');
        }else{
          $('#menu').addClass('menueAnimation');
        }

      });
    });
  </script>
</head>

<body>

<ul id="menu">
  <li data-menuanchor="page1" class="active"><a href="#page1">vue介绍</a></li>
  <li data-menuanchor="page2"><a href="#page2">vue实列</a></li>
  <li data-menuanchor="page3"><a href="#page3">vue指令</a></li>
  <li data-menuanchor="page4"><a href="#page4">vue生命周期</a></li>
</ul>

<div class="section section1">
  <h3>VUE.js前端走向组件化的时代</h3>
  <div>
    <div class="title">1.vue是什么</div>
    <div class="content">
      vue是一个使用MVVM模式的前端框架，是一个基于组件化开发的前端框架
    </div>
  </div>
  <div>
    <div class="title">2.vue优势是什么</div>
    <div class="content">
      <div>1）只需关注data</div>
      <div>2）高性能的虚拟dom</div>
      <div>3）组件化开发使得维护方便，扩展性强，可复用</div>
    </div>
  </div>
  <div>
    <div class="title">3.vue的延伸</div>
    <div class="content">
      <div>1）mpvue美团的开源框架，开发微信小程序</div>
      <div>2）weex阿里开源框架，开发手机app</div>
    </div>
  </div>
</div>
<div class="section section2">
  <h3>VUE.js实例</h3>
  <div>
    <div class="title">1.vue如何创建</div>
    <div class="content">
      <pre>
  new Vue({
    ...
  })
      </pre>
    </div>
  </div>
  <div>
    <div class="title">2.插值表达式</div>
    <div class="content">
      <div>{{表达式}}</div>
    </div>
  </div>
</div>
<div class="section section3">
  <h3>VUE.js指令</h3>
  <div>
    <div class="content">
      v-if,v-else,v-else-if
    </div>
    <div class="content">
      v-show
    </div>
    <div class="content">
      v-bind简写为:
    </div>
    <div class="content">
      v-on简写为:@
    </div>
    <div class="content">
      v-for
    </div>
    <div class="content">
      v-text
    </div>
    <div class="content">
      v-html
    </div>
    <div class="content">
      <a href="https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4" target="_blank">官网vue指令</a>
    </div>
  </div>
</div>
<div class="section section4">
  <h3>VUE.js生命周期</h3>
  <div class="content">
    beforeCreate
  </div>
  <div class="content">
    created
  </div>
  <div class="content">
    beforeMount
  </div>
  <div class="content">
    mounted
  </div>
  <div class="content">
    beforeUpdate
  </div>
  <div class="content">
    updated
  </div>
  <div class="content">
    beforeDestroy
  </div>
  <div class="content">
    destroyed
  </div>
  <div class="content">
    <a href="https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA" target="_blank">官网生命周期</a>
  </div>
</div>
</body>
</html>
